﻿<!--
 Copyright © 2013 Nokia Corporation. All rights reserved.
 Nokia and Nokia Connecting People are registered trademarks of Nokia Corporation. 
 Other product and company names mentioned herein may be trademarks
 or trade names of their respective owners. 
 See LICENSE.TXT for license information.
-->
    
<phone:PhoneApplicationPage
    x:Class="MusicExplorer.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:controls="clr-namespace:MusicExplorer"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <shell:SystemTray.ProgressIndicator>
        <shell:ProgressIndicator x:Name="ProgressIndicator" IsIndeterminate="True" IsVisible="{Binding ProgressIndicatorVisible}" />
    </shell:SystemTray.ProgressIndicator>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">

        <!--Panorama control-->
        <phone:Panorama SelectionChanged="Panorama_SelectionChanged">
            <phone:Panorama.Title>
                <Grid>
                    <TextBlock Text="music explorer"
                               FontSize="170" 
                               FontFamily="{StaticResource PhoneFontFamilyLight}"
                               Margin="0,0,0,0">
                    </TextBlock>
                    <Image Height="18" HorizontalAlignment="Left" Margin="14,-86,0,0" Source="/Assets/nokia_logo.png"></Image>
                </Grid>
            </phone:Panorama.Title>

            <phone:Panorama.Background>
                <ImageBrush ImageSource="/MusicExplorer;component/Assets/music_explorer_panorama_bg.jpg"/>
            </phone:Panorama.Background>

            <!--Favourites Item-->
            <phone:PanoramaItem>
                <Grid>
                    <TextBlock Margin="12,68,0,0" FontSize="24" TextWrapping="Wrap" 
                               Text="No local songs available for creating favourites list. Favourites list shows 20 artists with the most played songs." 
                               HorizontalAlignment="Center" Visibility="{Binding NoFavouritesVisibility}"></TextBlock>
                    <ListBox Margin="0,-38, -22,2" x:Name="LocalAudioList" ItemsSource="{Binding LocalAudio}" SelectionChanged="OnFavoriteSelectionChanged">
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <toolkit:WrapPanel/>
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>

                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <controls:FlipableItem Height="{Binding ItemHeight}"
                                                   Width="{Binding ItemWidth}"
                                                   ItemWidth="{Binding ItemWidth}"
                                                   FrontPrimaryText="{Binding Name}" 
                                                   FrontSecondaryText="{Binding LocalTrackCount}"
                                                   BackImage="{Binding ThumbUri}"/>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </Grid>
            </phone:PanoramaItem>

            <!--Recommended Item-->
            <phone:PanoramaItem>
                <Grid>
                    <TextBlock Margin="12,68,0,0" FontSize="24" TextWrapping="Wrap" Text="No recommendations available. List of recommended artists is created based on your favourite artists." HorizontalAlignment="Center" Visibility="{Binding NoRecommendedVisibility}"></TextBlock>
                    <phone:LongListSelector x:Name="RecommendationsList" Margin="0,-38,-22,2" ItemsSource="{Binding Recommendations}" SelectionChanged="OnRecommendationSelectionChanged" toolkit:TiltEffect.IsTiltEnabled="True">
                        <phone:LongListSelector.ListHeaderTemplate>
                            <DataTemplate>
                                <Grid Margin="12,0,0,20">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="*"/>
                                    </Grid.RowDefinitions>
                                    <TextBlock Text="recommended"
                                           Style="{StaticResource PanoramaItemHeaderTextStyle}"
                                           FontSize="65"
                                           Grid.Row="0"/>
                                </Grid>
                            </DataTemplate>
                        </phone:LongListSelector.ListHeaderTemplate>
                        <phone:LongListSelector.ItemTemplate>
                            <DataTemplate>
                                <Grid>
                                    <StackPanel Orientation="Horizontal" Margin="12,2,0,4" Height="105" Width="432">
                                        <Image Width="100" Height="100" Source="{Binding ThumbUri}"/>
                                        <StackPanel Width="311" Margin="8,-7,0,0">
                                            <TextBlock Text="{Binding Name}" Margin="10,0" 
                                                       Style="{StaticResource PhoneTextExtraLargeStyle}" 
                                                       FontSize="{StaticResource PhoneFontSizeLarge}" />
                                            <TextBlock Text="{Binding Country}" Margin="10,-2,10,0" 
                                                       Style="{StaticResource PhoneTextSubtleStyle}" />
                                            <TextBlock Text="{Binding Genres}" Margin="10,-2,10,0" 
                                                       Style="{StaticResource PhoneTextSubtleStyle}" />
                                        </StackPanel>
                                    </StackPanel>
                                </Grid>
                            </DataTemplate>
                        </phone:LongListSelector.ItemTemplate>
                    </phone:LongListSelector>
                </Grid>
            </phone:PanoramaItem>

            <!--What's New Item-->
            <phone:PanoramaItem>
                <phone:LongListSelector x:Name="NewReleasesList" Margin="0,-38,-22,2" ItemsSource="{Binding NewReleases}" SelectionChanged="OnNewReleasesSelectionChanged" toolkit:TiltEffect.IsTiltEnabled="True">
                    <phone:LongListSelector.ListHeaderTemplate>
                        <DataTemplate>
                            <Grid Margin="12,0,0,20">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <TextBlock Text="what's new"
                                           Style="{StaticResource PanoramaItemHeaderTextStyle}"
                                           FontSize="65"
                                           Grid.Row="0"/>
                            </Grid>
                        </DataTemplate>
                    </phone:LongListSelector.ListHeaderTemplate>
                    <phone:LongListSelector.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <StackPanel Orientation="Horizontal" Margin="12,2,0,4" Height="105" Width="432">
                                    <Image Width="100" Height="100" Source="{Binding ThumbUri}"/>
                                    <StackPanel Width="311" Margin="8,-7,0,0">
                                        <TextBlock Text="{Binding Performers}" Margin="10,0" 
                                                   Style="{StaticResource PhoneTextExtraLargeStyle}" 
                                                   FontSize="{StaticResource PhoneFontSizeLarge}" />
                                        <TextBlock Text="{Binding Name}" Margin="10,-2,10,0" 
                                                   Style="{StaticResource PhoneTextSubtleStyle}" />
                                        <TextBlock Text="{Binding Category}" Margin="10,-2,10,0" 
                                                   Style="{StaticResource PhoneTextSubtleStyle}" />
                                    </StackPanel>
                                </StackPanel>
                                <Image Width="30" Height="30" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="92,2,0,0" Source="Assets/music_explorer_note.png"/>
                            </Grid>
                        </DataTemplate>
                    </phone:LongListSelector.ItemTemplate>
                </phone:LongListSelector>
            </phone:PanoramaItem>

            <!--Who's Hot Item-->
            <phone:PanoramaItem>
                <phone:LongListSelector x:Name="TopArtistsList" Margin="0,-38,-22,2" ItemsSource="{Binding TopArtists}" SelectionChanged="OnTopArtistsSelectionChanged" toolkit:TiltEffect.IsTiltEnabled="True">
                    <phone:LongListSelector.ListHeaderTemplate>
                        <DataTemplate>
                            <Grid Margin="12,0,0,20">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <TextBlock Text="who's hot"
                                           Style="{StaticResource PanoramaItemHeaderTextStyle}"
                                           FontSize="65"
                                           Grid.Row="0"/>
                            </Grid>
                        </DataTemplate>
                    </phone:LongListSelector.ListHeaderTemplate>
                    <phone:LongListSelector.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" Margin="12,2,0,4" Height="105" Width="432">
                                <Image Width="100" Height="100" Source="{Binding ThumbUri}"/>
                                <StackPanel Width="311" Margin="8,-7,0,0">
                                    <TextBlock Text="{Binding Name}" Margin="10,0" 
                                               Style="{StaticResource PhoneTextExtraLargeStyle}" 
                                               FontSize="{StaticResource PhoneFontSizeLarge}" />
                                    <TextBlock Text="{Binding Country}" Margin="10,-2,10,0" 
                                               Style="{StaticResource PhoneTextSubtleStyle}" />
                                    <TextBlock Text="{Binding Genres}" Margin="10,-2,10,0" 
                                               Style="{StaticResource PhoneTextSubtleStyle}" />
                                </StackPanel>
                            </StackPanel>
                        </DataTemplate>
                    </phone:LongListSelector.ItemTemplate>
                </phone:LongListSelector>
            </phone:PanoramaItem>

            <!--Genres Item-->
            <phone:PanoramaItem>
                <phone:LongListSelector x:Name="GenresList" Margin="0,-38,-22,2" ItemsSource="{Binding Genres}" SelectionChanged="OnGenresSelectionChanged" toolkit:TiltEffect.IsTiltEnabled="True">
                    <phone:LongListSelector.ListHeaderTemplate>
                        <DataTemplate>
                            <Grid Margin="12,0,0,20">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <TextBlock Text="genres"
                                           Style="{StaticResource PanoramaItemHeaderTextStyle}"
                                           FontSize="65"
                                           Grid.Row="0"/>
                            </Grid>
                        </DataTemplate>
                    </phone:LongListSelector.ListHeaderTemplate>
                    <phone:LongListSelector.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" Margin="0,2,0,4" Height="75" Width="432">
                                <StackPanel Width="411" Margin="7,0,0,0">
                                    <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Margin="10,0" 
                                               Style="{StaticResource PhoneTextExtraLargeStyle}" 
                                               FontSize="{StaticResource PhoneFontSizeLarge}" />
                                </StackPanel>
                            </StackPanel>
                        </DataTemplate>
                    </phone:LongListSelector.ItemTemplate>
                </phone:LongListSelector>
            </phone:PanoramaItem>

            <!--Mixes Item-->
            <phone:PanoramaItem>
                <phone:LongListSelector x:Name="MixGroupsList" Margin="0,-38,-22,2" ItemsSource="{Binding MixGroups}" SelectionChanged="OnMixGroupsSelectionChanged" toolkit:TiltEffect.IsTiltEnabled="True">
                    <phone:LongListSelector.ListHeaderTemplate>
                        <DataTemplate>
                            <Grid Margin="12,0,0,20">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <TextBlock Text="mixes"
                                           Style="{StaticResource PanoramaItemHeaderTextStyle}"
                                           FontSize="65"
                                           Grid.Row="0"/>
                            </Grid>
                        </DataTemplate>
                    </phone:LongListSelector.ListHeaderTemplate>
                    <phone:LongListSelector.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" Margin="0,2,0,4" Height="75" Width="432">
                                <StackPanel Width="411" Margin="7,0,0,0">
                                    <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Margin="10,0" 
                                               Style="{StaticResource PhoneTextExtraLargeStyle}" 
                                               FontSize="{StaticResource PhoneFontSizeLarge}" />
                                </StackPanel>
                            </StackPanel>
                        </DataTemplate>
                    </phone:LongListSelector.ItemTemplate>
                </phone:LongListSelector>
            </phone:PanoramaItem>

        </phone:Panorama>
        
    </Grid>

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Minimized" Opacity="1.0" >
            <shell:ApplicationBarIconButton IconUri="/Assets/questionmark.png" Text="about" Click="About_Click" />
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
    
</phone:PhoneApplicationPage>